<div class="row">
    <div class="col-xs-12">
      <div class="box">
          <div class="box-header with-border">
              <form class="form-inline" #briefingForm="ngForm">
                <div class="input-group">
                    <div class="input-group myGunner" [class.has-error]="startDate.valid ===false &&(startDate.dirty || startDate.touched)">
                       <span class="input-group-addon">
                        <i class="fa fa-calendar"></i>
                       </span>
                      <!--  <div class="input-group-addon" [class.has-error]="startDate.valid ===false &&(startDate.dirty || startDate.touched)">
                            <i class="fa fa-calendar"></i> -->
                          <input type="text" class="form-control" id='startDate' (click)="getstartDate()" (blur)="onblurgetstartDate()" #startDate="ngModel" required [(ngModel)]="moon.startDate" name="startDate" placeholder="开始日期">
                        </div>
                        <span class="input-group myGunner">
                            <i class="fa  fa-long-arrow-right"></i> 
                        </span>
                        <div class="input-group" [class.has-error]="endDate.valid ===false &&(endDate.dirty || endDate.touched)">
                            <span class="input-group-addon">
                                <i class="fa fa-calendar"></i>
                               </span>
                          <input type="text" class="form-control" id='endDate' (click)="getendDate()" (blur)="onblurgetendDate()" #endDate="ngModel" required [(ngModel)]="moon.endDate" name="endDate" placeholder="结束日期">
                        </div>
    
                        
                </div>
                  <div class="input-group"> 
                          <button type="button" class="btn btn-block btn-primary" (click)="loadList(1)">搜索</button>
                         </div>
              </form>
          </div>

          <div class="box-body table-responsive">
              <table style="table-layout:fixed" class="table table-hover table-striped table-bordered">
                  <tr>
                      <th>编号</th>
                      <th>负责人</th>
                      <th class="limitwi">短信预警信息</th>
                      <th class="limitwi">邮件预警信息</th>
                      <th class="limitwi">页面预警信息</th>
                      <th class="limitwi">提醒日期</th>
                  <!--    <th>结束日期</th> -->
                  </tr>
                  <tr *ngFor="let item of listData.list;">
                    <td>{{item.id}}</td>
                    <td>{{item.username}}</td>
                    <td class="limitwi" [innerHTML]="item.smsContent | report" (click)="detailContent('sms',item)">{{item.smsContent}}</td>
                    <td class="limitwi" [innerHTML]="item.emailContent | report" (click)="detailContent('email',item)">{{item.emailContent}}</td>
                    <td class="limitwi" [innerHTML]="item.webContent | report" (click)="detailContent('web',item)">{{item.webContent}}</td>
                    <td class="limitwi" >{{item.createdAt}}</td>
                 <!--   <td>{{item.updatedAt}}</td> -->
                  </tr>
              </table>
          </div>
          <div class="box-footer clearfix">
            <p class="pull-left">共{{listData.total}}个 每页
                <select [(ngModel)]="pageSize" (ngModelChange)="loadList(1)">
                    <option value="10">10</option>
                    <option value="20">20</option>
                    <option value="30">30</option>
                    <option value="50">50</option>
                    <option value="100">100</option>
                </select> 个当前显示第{{listData.pageIndex}}页 </p>
            <ul class="pagination pagination-sm no-margin pull-right">
                <li (click)="changePage('pre',null)">
                    <a>
                    上一页
                    </a>
                </li>
                <li *ngFor="let item of pages" (click)="changePage('page',item+1)" [class.active]="pageIndex === item+1">
                    <a>
                    {{item+1}}
                    </a>
                </li>
                <li (click)="changePage('next',null)">
                    <a>
                    下一页
                    </a>
                </li>
            </ul>
        </div>
      </div>
    </div>
</div>
<app-detail [message]='detail'></app-detail>